<template>
	<div class="grid-layout-container">
        <el-card class="box-card">
			<template #header>
				<div class="flex-startCenter ">
					<span class="mr20">本月统计</span>
					<el-radio-group v-model="state.status"  >
						<el-radio-button :label="1">全部</el-radio-button>
						<el-radio-button :label="2">直营</el-radio-button>
						<el-radio-button :label="3">加盟</el-radio-button>
					</el-radio-group>
				</div>
			</template>
			<grid-layout v-model:layout="state.layouts" :col-num="9" :row-height="140"
				:is-draggable="true" :is-resizable="false" :is-mirrored="false"
				:vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true">
				<grid-item v-for="item in state.layouts"
					:x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
					<div class="flex" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<PieChart :data="state.data" /> 
						<p style="color: #000;">{{ item.value }}</p>
						<p style="color: #000;">总计2564658元</p>
					</div>
				</grid-item>
			</grid-layout>
		</el-card>
	</div>
</template>


<script setup lang="ts" name="funGridLayout">
	import * as echarts from 'echarts';
	import 'echarts-wordcloud';
	import {reactive, onMounted, watch, nextTick, onActivated, ref, defineAsyncComponent } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';

	const PieChart = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/Pie.vue'));

	const chartsWarningRef = ref();
	const storesTagsViewRoutes = useTagsViewRoutes();
	const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);

	const state = reactive({
		status: 1,
		global: {
			homeChartOne: null,
			homeChartTwo: null,
			homeCharThree: null,
			dispose: [null, '', undefined],
		} as any,
		layouts: [
			{ x: 0, y: 0, w: 1, h: 1, i: 0, icon: 'iconfont icon-yangan', value: '月营业额' },
			{ x: 1, y: 0, w: 1, h: 1, i: 1, icon: 'iconfont icon-yangan', value: '月储值额' },
			{ x: 2, y: 0, w: 1, h: 1, i: 2, icon: 'iconfont icon-yangan', value: '月划卡业绩' },
			{ x: 3, y: 0, w: 1, h: 1, i: 3, icon: 'iconfont icon-yangan', value: '月消耗业绩' },
			{ x: 4, y: 0, w: 1, h: 1, i: 4, icon: 'iconfont icon-yangan', value: '月服务量' },
			{ x: 5, y: 0, w: 1, h: 1, i: 5, icon: 'iconfont icon-yangan', value: '月客流量' },
			{ x: 6, y: 0, w: 1, h: 1, i: 6, icon: 'iconfont icon-yangan', value: '月欠款额' },
			{ x: 7, y: 0, w: 1, h: 1, i: 7, icon: 'iconfont icon-yangan', value: '月还款额' },
			{ x: 8, y: 0, w: 1, h: 1, i: 8, icon: 'iconfont icon-yangan', value: '月新增会员' },
		],
		myCharts: [] as EmptyArrayType,
		charts: {
			theme: '',
			bgColor: '',
			color: '#303133',
		},
		data: [
			{ value: 40, name: '监测设备预警' },
			{ value: 38, name: '天气预警' },
			{ value: 32, name: '任务预警' },
			{ value: 30, name: '病虫害预警' },
		]
	});


	// 批量设置 echarts resize
	const initEchartsResizeFun = () => {
		nextTick(() => {
			for (let i = 0; i < state.myCharts.length; i++) {
				state.myCharts[i].resize();
			}
		});
	};

	// 页面加载时
	onMounted(() => {
		// setTimeout(() => {
		// 	initChartsWarning();
		// 	initEchartsResize();
		// }, 1000);
	});
	// 由于页面缓存原因，keep-alive
	onActivated(() => {
		initEchartsResizeFun();
	});
	// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
	watch(
		() => isTagsViewCurrenFull.value,
		() => {
			initEchartsResizeFun();
		}
	);
</script>
<style scoped lang="scss">
.grid-layout-container {
    
	.vue-grid-item {
		color: var(--el-color-white);
	}
}
</style>